Trecco - Travel community app..

Here are the key issues I've recognized in trecco's early UIs. And client also identified some of them, and he asked, "how we can redesign this to give a better experience for our community." Outdated UI design The UIs need to be aligned with current UI trends. Also, it took a lot of work to plug-in new features due to a lack of consistency. No defined user journey There was no defined user journey in the previous design, which breaks the user experience and leads to confusion. App has less attention and has lower download metrics The app didn’t have enough user attention, so the download metrics were below the expected rates.

Goal

Refresh the UIs that align with current UI trends Priority was to redesign the user journey to fix all the user experience issues we’ve identified on this app and give it a new look. And I decided to build scalable design components and a proper design system so we can scale the application in the future as we want. Highlight the value proposition of trecco With the new features we were going to introduce, we want to highlight the purpose of this application and how the community benefits from it. Operational efficiency The old app was bulky and slow due to the devs’ technology. We also wanted to sort out this in addition to the UI UX enhancement. Get more user attention to the app Trecco is a community-based app. So by doing all these changes, we expected to gain more active users in the app.

This application was built after researching the relevant domains, so I didn’t want to do another research from the beginning. But I took all the previous data the team had, did a quick scan, identified the things they’d missed, and started identifying and sorting some of the main features using the feature prioritize technique. Then create a new user flow to make this version successful.by: Sayi Camara

Once I finalized which features to prioritize, I created a new user flow to demonstrate the overall structure of the app.

WIREFRAMES

After finalizing the flow, I started sketching my initial thoughts and ideas based on the key features and the research insights. We wanted several features on this application inspired by some social media applications. Aligning them with our design style was a challenge, but I took that challenge and managed them perfectly. This is what the refined wireframe looked like. Here are some of the wireframes that I’ve done,

 

UI screens

Once I got the green light for the wireframes that I’ve done, I started turning them into high-fidelity designs. To ensure the design aesthetic was in place, I had to do A/B testing to determine the most appropriate elements and stylings. To ensure the navigation is correct, I created a prototype including all the flows that users can go and share it across the team with different user action lists. Further enhancements have been made based on the final results. Here are some of the wireframes that I’ve done,